<template>
	<view class="container">
		<com-head textTit="我的评价" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<template v-if="list.length">
			<view class="list"  v-for="(ele,index) in list" :key="index">
				 <view class="userInfo">
				 	<view class="left">
				 		<image class="avatar" :src="ele.user.avatar" mode="aspectFill" ></image>
						<text class="name">{{ele.user.username}}</text>
				 	</view>
					<view class="right">
						<text class="timer">{{ele.user.create_time}}</text>
						<text class="eva">{{ele.ordersGoods.id ? ele.goods_score : ele.project_score }}星好评</text>
					</view>
				 </view>
				 <view class="goodsInfo">
				 	<view class="goods">{{ele.content}}</view>
					<view class="goodslist" v-if="ele.files">
						<image v-for="(ele,index1) in ele.files" :key="index1" :src="ele" mode=""></image>
					</view>
				 </view>
				 <view class="button">
				 	<!-- <text class="edit">修改</text> -->
					<text class="dele" @click="deleComment(ele,index)">删除</text>
				 </view>
				 <!-- 商家回复 -->
				<view class="replyWrap" v-if="ele.reply_content">
				 	<view class="tit">商家回复</view>
					<view class="replyContent">
						{{ele.reply_content}}
					</view>
				 </view>
				 <!-- 商品 -->
				 <view class="itemList" v-if="ele.ordersGoods.id">
				 	<image  :src="ele.ordersGoods.goods_images[0]" mode=""></image>
					<view class="right">
						<view class="itemName">{{ele.ordersGoods.goods_name}}</view>
						<!-- <view class="shopName">购买门店：正大广场店</view> -->
						<view class="bottom">
							<text class="num">x {{ele.ordersGoods.number}}</text>
							<text class="price">¥{{ele.ordersGoods.orders_payable}}</text>
						</view>
					</view>
				 </view>
				 <!-- 项目 -->
				 <view class="itemList" v-else>
				 	<image  :src="ele.ordersProject.project_images[0]" mode=""></image>
						<view class="right">
							<view class="itemName">{{ele.ordersProject.project_name}}（{{ele.ordersProject.duration}}分）</view>
							<!-- <view class="shopName">购买门店：正大广场店</view> -->
							<view class="bottom">
								<text class="num">x {{ele.ordersProject.number}}</text>
								<text class="price">¥{{ele.ordersProject.orders_payable}}</text>
							</view>
						</view>
				 </view>
			</view>
			<u-loadmore margin-top="50" margin-bottom="50" :status="status" />
		</template>
		<!-- 没有数据时 -->
		<view class="noDate" v-else>
			<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/10/2x-8.png" mode=""></image>
			<view>您还没有评价过商品哦~</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list:[],
				status:'loading',
				total:0,
				page:1,
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad() {
			this.evaluationList()
		},
		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++;
				this.evaluationList();
			}
		},
		methods: {
		async deleComment(ele,index){
			uni.showModal({
			    title: '提示',
				confirmColor:'#007664',
			    content: '您确定要删除此评论？',
			    success: async (res) => {
			        if (res.confirm) {
						let {data,code} = await this.$u.api.delComment({id:ele.id});
						if(code){
							this.list.splice(index,1)
							this.utlis.Toast("删除成功","success")
						}
			        } else if (res.cancel) {
			        }
			    }
			});
		},
		async evaluationList(){
			let {data,code} = await this.$u.api.getUserComment({pages:this.page});
			if(code){
				if(this.page == 1 && !data.data.lenght){
					this.status = 'nomore';
				}
				this.list = [...this.list, ...data.data];
				this.list.forEach((ele)=>{
					if(ele.ordersGoods != null){
						ele.ordersGoods.goods_images = ele.ordersGoods.goods_images.split(",")
					}else{
						ele.ordersProject.project_images = ele.ordersProject.project_images.split(",")
					}
					if(ele.files){
						ele.files  = ele.files.split(",")
					}
				})
				console.log(this.list)
				this.total = data.total;
				if (this.total <= this.list.length) this.status = 'nomore';
				else this.status = 'loading';
			}
		 },
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 32rpx;
	.noDate{
		width: 360rpx;
		position: absolute;
		left: 50%;
		top: 34%;
		transform: translate(-50%,-50%);
		color: #666666;
		font-size: 26rpx;
		text-align: center;
		image{
			width: 360rpx;
			height: 310rpx;
			display: block;
			margin-bottom: 78rpx;
		}
	}
	.list{
		padding: 30rpx 32rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		.userInfo{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 41rpx;
			.left{
				display: flex;
				align-items: center;
				image{
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}
				.name{
					color: #333333;
					font-size: 24rpx;
				}
			}
			.right{
				font-size: 24rpx;
				.timer{
					color: #999999;
					margin-right: 14rpx;
				}
				.eva{
					color: #BCA364;
				}
			}
		}
		.goodsInfo{
			.goods{
				color: #333333;
				font-size: 24rpx;
				line-height: 40rpx;
				margin-bottom: 30rpx;
			}
			.goodslist{
				display: flex;
				flex-wrap: wrap;
				image{
					width: 132rpx;
					height: 132rpx;
					margin-bottom: 20rpx;
					margin-right: 27rpx;
				}
				image:nth-child(4n+4){
					margin-right: 0;
				}
			}
		}
		.button{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			color: #999999;
			font-size: 24rpx;
			padding-bottom: 16rpx;
			border-bottom: 1rpx solid rgba(142,142,142,.24);
			line-height: 33rpx;
			.edit{
				margin-right: 24rpx;
			}
			.dele{
				color: #007664;
			}
		}
		.replyWrap{
			margin: 25rpx 0 !important;
			.tit{
				color: #333333;
				font-size: 26rpx;
				margin-bottom: 14rpx;
			}
			.replyContent{
				width: 619rpx;
				background: #f6f7fa;
				border-radius: 4rpx;
				padding: 14rpx 27rpx 31rpx 16rpx;
				font-size: 24rpx;
				color: #333333;
				line-height: 46rpx;
			}
		}
		.itemList{
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			>image{
				width: 157rpx;
				height: 157rpx;
				margin-right: 28rpx;
				display: block;
				// flex-grow: 1;
				flex: none;
			}
			.right{
				.itemName{
					width: 444rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32rpx;
					color: #000000;
					line-height: 45rpx;
				}
				.shopName{
					font-size: 24rpx;
					color: #999999;
					line-height: 26rpx;
					margin: 16rpx 0 28rpx 0;
				}
				.bottom{
					width: 444rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 75rpx;
					.num{
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
					}
					.price{
						font-size: 30rpx;
						color: #007664;
						line-height: 42rpx;
					}
				}
			}
		}
	}
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
